<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Analyse statistique</title>
        <h:outputScript library="primefaces" name="jquery/jquery.js" />      
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="css/site.css"/>
        <script src="js/visualization.js"></script>
    </h:head>
    <h:body>
        <table style="width:90%; margin:auto; padding-top: 30px">
            <tr>
                <td style="text-align:left;" class="cloudhisto">
                    <div id="lbCloud" onclick="cloudClick()">Tag cloud</div>
                </td>
                <td style="text-align:right" class="cloudhisto">
                    <div id="lbHistogram" onclick="histoClick()">Histogram</div>
                </td>
            </tr>
            <tr>                    
                <td colspan="2">                    
                    <div id="contentCloud" style="top:100px; left:0; margin:auto; text-align: center; position: absolute; width:100%">                                                                        
                        <p:galleria style="margin:auto;" value="#{pageController.imagesCloud}" var="image" showFilmstrip="true" showCaption="true" panelWidth="800" panelHeight="400">                                                                                    
                            <h:graphicImage width="800px" value="/visual/#{image}.png" alt="" title="#{image.substring(2)}"/>
                        </p:galleria>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="contentHisto" style="top:100px; left:0; margin: auto; text-align: center; position:absolute; width:100%">
                        <p:contentFlow style="border:none; height:450px" value="#{pageController.imagesHisto}" var="image">
                            <h:graphicImage value="/visual/#{image}.png" styleClass="content" />
                            <div class="visualization">#{image.substring(2)}</div>
                        </p:contentFlow>
                    </div>
                </td>
            </tr>
        </table>            
        <h:form>
            <div id="btCompare" style="text-align:center"><p:commandButton value="Compare" action="#{pageController.gotoCompare()}" style="margin-top: 480px;width: 300px; height:50px"/></div>
        </h:form>
    </h:body>
</html>
